@mainColor: #D9BC8C;

.c-calendar {
    // background: rgba(255, 255, 255, 0.5);
}

.calendar-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12rpx;

    .month {
        font-size: 30rpx;
        line-height: 40rpx;
        color: @mainColor;
        margin: 0 26rpx;
    }

    .arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40rpx;
        height: 40rpx;
    }

    .tri {
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-bottom: 12rpx solid @mainColor;

        &.left {
            transform: rotate(-90deg);
        }

        &.right {
            transform: rotate(90deg);
        }
    }
}

.calendar-body {
    font-size: 22rpx;
    line-height: 22rpx;
}

.calendar-row {
    display: flex;
    justify-content: space-between;
}

.week-select {}

.date-row {}

.calendar-item-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 5rpx 0;

    .calendar-item {
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 44rpx;
        height: 44rpx;
        text-align: center;
    }


    &.today .calendar-item {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
    }

    &.active .calendar-item {
        background: @mainColor;
        border-radius: 50%;
    }

    &.other-month {
        opacity: 0.3;
    }

    &.disabled {
        opacity: 0.3;
        pointer-events: none;
    }

}



/* 日历外部样式 为了剥离后日历可以足够通用  小程序的样式被限制太死，所以也写到这里了 逻辑其实也嵌入了一些 小程序传值太麻烦了 */
.c-calendar {
    .calendar-item-wrap {
        &.other-month {
            visibility: hidden;
            pointer-events: none;
        }

        // &.is-fill {
        //     pointer-events: none;
        // }

        &.is-fill .calendar-item {
            font-size: 16rpx;
            border-radius: 50%;
        }

        &.is-fill:not(.active) .calendar-item {
            background: #A0A0A0;
        }
    }
}